<template>
  <div class="manage-box">
    <aside :class="isCollapse ? 'close-aside' : ''">
      <div :class="isCollapse ? 'close-title title' : 'title'">
        电力巡检系统
      </div>
      <el-menu :collapse="isCollapse" :router="true">
<!--   el-menu如果开启了路由模式，那么会使用el-menu-item的index属性作为路由     -->
        <el-menu-item v-for="menu in menus" :index="menu.route">
          <el-icon>
            <component :is="menu.icon" />
          </el-icon>
          <template #title>{{menu.name}}</template>
        </el-menu-item>
      </el-menu>
    </aside>
    <main>
      <header>
        <el-icon>
          <component :is="isCollapse ? 'expand' : 'fold'" @click="isCollapse = !isCollapse"/>
        </el-icon>
        <ul class="user-info">
          <li style="font-size: 14px;">{{user.name}}</li>
          <li>
            <el-button link>退出登录</el-button>
          </li>
        </ul>
      </header>
      <section>
        <article>
          <router-view />
        </article>
        <footer>&copy; 2023-2030 千锋成都Java2301</footer>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">

import { ref } from "vue";
import {doGet} from '../components/ajax'

const menus = ref([])

const user = ref({});

const isCollapse = ref(false)

//进入这个页面的时候，需要进行一次查询，这种查询称为页面初始化查询

const initialize = () => {
  doGet("/user/init", null, resp => {
    menus.value = resp.data.menus;
    user.value = resp.data.user;
  })
}

//调用函数
initialize();

</script>

<style scoped>
  .manage-box{
    display: flex;
    flex-direction: row;
    height: 100%;
  }
  aside{
    width: 200px;
    display: flex;
    flex-direction: column;
    transition: width .5s;
  }
  .close-aside{
    width: 60px;
  }
  .el-menu{
    flex-grow: 1.0;
    flex-shrink: 1.0;
  }
  main{
    flex-grow: 1.0;
    flex-shrink: 1.0;
    display: flex;
    flex-direction: column;
  }
  header,
  .title {
    height: 50px;
    border-bottom: 1px solid #ddd;
  }
  .title{
    transition: width .5s;
  }
  .close-title{
    width: 60px;
  }
  section{
    flex-grow: 1.0;
    flex-shrink: 1.0;
    display: flex;
    flex-direction: column;
  }

  article{
    flex-grow: 1.0;
    flex-shrink: 1.0;
    padding: 10px;
  }
  footer{
    height: 40px;
    border-top: 1px solid #ddd;
  }

  .user-info{
    list-style-type: none;
    float: right;
    margin: 0 20px 0 0;
    height: 100%;
    line-height: 50px;
    padding: 0;
  }

  .user-info > li{
    display: inline-block;
    padding: 0 8px;
  }
</style>
